/** 功能模块使用图部件
 * Author:      huoxj 
 * CreateTime:  2023/2/5 20:36:33 
 * LastEditor:  huoxj 
 * ModifyTime:  2023/12/5 19:33:43 
 * Description: 
*/ 
<template>
  <div ref="echarsRef" :style="{width:props.width , height:props.height}" ></div>
</template>
<script setup lang="ts">
import { ref  , Ref , reactive , watchEffect,onMounted,watch} from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import {defHttp} from "/@/utils/http/axios";

const props = defineProps(['width' , 'height','software']);

const echarsRef = ref<HTMLDivElement | null>(null);

const { setOptions, echarts,getInstance: chartInstance} = useECharts(echarsRef as Ref<HTMLDivElement>,'dark');

const option = reactive({});
function initCharts() {
  Object.assign(option,reactive({
    title:{
      show: true,
      text:"{h|"+(props.software? props.software: 'XX软件')+"}{n|功能模块使用图}",
      textVerticalAlign:'top',
      left:'center',
      top: '4%',
      textStyle:{
        overflow: 'truncate',
        ellipsis: '...',
        rich: {
          "n": {
            color: "rgba(255, 255, 255, 1)",
            fontSize: 17,
            textBorderWidth:'1',
          },
          "h": {
            color: "rgba(255, 0, 0, 1)",
            fontSize: 17,
            fontWeight: 'bold',
          }
        }
      },
    },
    backgroundColor:'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 10;
    },
    grid:{
      containLabel:true,
      left:'center',
      top:'8%',
      bottom:'10%',
      width:"85%",
    },
    legend: {
      show:true,
      type:'plain',
      top:'94%',
      textStyle: {
        fontWeight: 700,
        fontSize: 12,
        color: '#ffffff'
      },
      data: ['部署数', '使用数']
    },
    yAxis: {
      type: 'category',
      data: [ '模块1', '模块2', '模块3', '模块4','模块5'],
      nameTextStyle: {
        fontWeight: 700,
        fontSize: 12,
        color: '#ffffff'
      },
      axisLabel: {
        textStyle: {
          color: '#ffffff',
        },
      },
      boundaryGap: true,
      splitLine:{show: false},
      splitArea:{
        show: true,
      }
    },
    xAxis: {
      type: 'value',
      splitLine:{show: false},
      nameTextStyle: {
        fontWeight: 700,
        fontSize: 12,
        color: '#ffffff'
      },
      axisLabel: {
        textStyle: {
          color: '#ffffff',
        },
      },      
    },
    series: [
      {
        type: 'bar',
        name: '部署数',
        data: [23, 24, 18, 25, 18],
        barGap: '20%',
        barCategoryGap: '40%',
        emphasis: {
          focus: 'series',
          blurScope: 'coordinateSystem',
          label: {
            show: true,
            color: '#fff',
            position: "outside",
          },
        },
        itemStyle: {
          opacity: 0.8
        },
        label: {
          show: true,
          // rotate: 90,
          color:'#fff',
          align: 'center',
          verticalAlign: 'middle',
          position: 'top',
        },
        animationDurationUpdate: 1000, // 更新动画时长为 1s
        animationEasingUpdate: 'quinticInOut', // 更新动画缓动效果为 'quinticInOut'
        animationDelay: function (idx) {
          return idx * 10 + 100;
        }
      },
      {
        type: 'bar',
        name: '使用数',
        data: [12, 14, 9, 9, 11],
        barGap: '20%',
        barCategoryGap: '40%',
        emphasis: {
          focus: 'series',
          blurScope: 'coordinateSystem',
          label: {
            show: true,
            color: '#fff',
            position: "outside",
          },
        },
        itemStyle: {
          opacity: 0.8
        },
        animationDurationUpdate: 1000, // 更新动画时长为 1s
        animationEasingUpdate: 'quinticInOut', // 更新动画缓动效果为 'quinticInOut'
        animationDelay: function (idx) {
          return idx * 10 + 100;
        }
      }
    ]
  }));
  setOptions(option,false);
}

function loadChartsData() {
  console.log("loadChartsData")
  let params = {softwareName : props.software}
  defHttp.get({url: "/software/modelUsed", params}, {isTransformResponse: false}).then((res) => {
    if (res.success) {
      let opt = {
        title:{
          text:"{h|"+props.software+"}{n|功能模块使用图}",
        },
        yAxis: {
          data: res.result.nameList
        },
        series: [
          {
            data:  res.result.allCountList,
          },
          {
            data: res.result.useCountList,
          }
        ]
      };
      setOptions(opt,false);
    } else {
      console.log("接口错误用默认")
    }
  });
}

watchEffect(() => {
  props.software && loadChartsData();
});
onMounted(() => {
  initCharts();
});
/**
 *监听software
  */
//   watch(
//   () => props.software,
//   () => {
//     console.log("leftWatch")
//
//     props.software && initCharts();
//   }
// );

</script>
<style>
</style>
